<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        财务明细
                    </div>
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/withdrawal">
                                <li>提现审批</li>
                            </router-link>
                            <router-link to="/finance">
                                <li class="active">用户管理</li>
                            </router-link>
                            <router-link to="/score">
                                <li>积分管理</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="publicTable toLongTable">
                        <div class="main-returns">
                            <i class="el-icon-arrow-left" @click="returns()"></i>
                            <span @click="returns()">返回</span>
                        </div>
                        <div class="user-details clear">
                            <div class="fl">
                                <p>
                                    用户账号：{{userDetail.user_account}}
                                </p>
                                <p>
                                    用户实名：{{userDetail.clt_nm}}
                                </p>
                                <p>
                                    用户身份：{{userDetail.user_type}}
                                </p>
                            </div>
                            <div class="fl">
                                <p>
                                    电子银行号：{{userDetail.bank_eid}}
                                </p>
                                <p>
                                    开户时间：{{userDetail.create_time | times}}
                                </p>
                                <p>
                                    平台剩余积分：{{userDetail.residue_score}}
                                </p>
                                <p>
                                    已兑换积分：{{userDetail.exchange_scor}}
                                </p>
                            </div>
                        </div>
                        <table class="head_table">
                            <tr>
                                <td width="5%">序号</td>
                                <td width='12%'>流水号</td>
                                <td width='12%'>银行卡号</td>
                                <td width='7%'>交易时间</td>
                                <td width='10%'>金额</td>
                                <td width='7%'>实际手续费</td>
                                <td width='12%'>状态</td>
                            </tr>
                        </table>
                        <el-scrollbar>
                            <table class="content_table">
                                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                                    <td width="5%">{{index+1}}</td>
                                    <td width='12%'>{{item.order_no}}</td>
                                    <td width='12%'>{{item.bank_no}}</td>
                                    <td width='7%'>{{item.create_time}}</td>
                                    <td width='10%'>{{item.money}}</td>
                                    <td width='7%'>{{item.fee}}</td>
                                    <td width='12%' v-if="item.status==1">成功</td>
                                    <td width='12%' v-else>处理中</td>
                                </tr>
                            </table>
                        </el-scrollbar>
                    </div>
                    <div class="nodataTip" v-if="showNodataTip">
                        <i class="iconfont icon-zanwuneirong"></i>
                        <h5>暂无内容</h5>
                    </div>
                    <div class="orderBotom">
                        <div class="orderBotomRight">
                            <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import finance from "@/api/finance";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "finance",
      pages: 1,
      listData: [],
      totalnum: 0,
      showNodataTip: false,
      id: this.$route.params.id,
      userDetail: ""
    };
  },
  methods: {
    returns() {
      history.go(-1);
    },
    screen() {
      this.search = true;
    },
    hideSystemPopup() {
      this.search = false;
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.getList();
    },
    searchs() {
      this.getList();
    },
    getList() {
      this.showNodataTip = false;
      let options = {
        account_type: "normal",
        account_id: this.id,
        money_type: "cashout",
        page:this.pages
      };
      finance.cashDetails(options).then(res => {
        if (res.code == 1) {
          this.search = false;
          this.listData = res.data.list;
          this.totalnum = Number(res.data.total_nums);
          if (!Number(res.data.total_nums)) {
            this.showNodataTip = true;
          }
        }
      });
    },
    getDetails() {
      const options = {
        account_type: "normal",
        account_id: this.id
      };
      finance.userFinDetails(options).then(res => {
        if (res.code == 1) {
          this.userDetail = res.data;
        }
      });
    }
  },
  mounted() {
    this.getList();
    this.getDetails();
  },
  filters: {
    times(value) {
      var time = new Date(value * 1000);
      var month =
        time.getMonth() + 1 > 9
          ? time.getMonth() + 1
          : "0" + (time.getMonth() + 1);
      var data = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
      var hour = time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
      var minutes =
        time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
      var second =
        time.getSeconds() > 9 ? time.getSeconds() : "0" + time.getSeconds();
      var times =
        time.getFullYear() +
        "-" +
        month +
        "-" +
        data +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        second;
      return times;
    }
  }
};
</script>

<style lang='less'>
.user-details {
  div {
    width: 30%;
    padding-left: 20px;
    p {
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
